import leftImg from '@/images/common/left-light.svg';
import leftWhiteImg from '@/images/common/leftWhite.svg';
import utils from '@/utils/index';
import { Image, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { useEffect } from 'react';
import './index.scss';

const NavBar = (props) => {
  const {
    title = '自定义导航栏',
    showLeft = true,
    leftWhite = false,
    onLeft = () => Taro.navigateBack(),
    leftContent = showLeft ? (
      <Image src={leftWhite ? leftWhiteImg : leftImg} className="icon" />
    ) : null,
    children = null,
    backgroundColor = children ? 'transparent' : '#ffffff',
    titleColor = 'rgba(0, 0, 0, 0.85)',
    titleStyles = null,
  } = props;

  let style = {
    paddingTop: Taro.$statusBarHeight + 'px',
    backgroundColor: backgroundColor,
  };
  let titleStyle = titleStyles
    ? titleStyles
    : {
        color: titleColor,
      };
  if (Taro.$isH5) {
    style.display = 'none';
  }

  // 设置下标题
  useEffect(() => {
    utils.setTitle(props.title ?? '');
  }, [props.title]);
  // 将状态栏的区域空余出来
  return (
    <View className="navBar-wrap" style={style}>
      <View className="navBar" style={style}>
        <View className="left" onClick={onLeft}>
          {leftContent}
        </View>
        <View className="title omit" style={titleStyle}>
          {title}
        </View>
        <View className="right">&nbsp;</View>
      </View>
      {children && <View className="navBar-custom-wrap">{children}</View>}
    </View>
  );
};

export default NavBar;
